<template>
  <div class="main">
    <el-tabs v-model="activeName" style="width: 100%">
      <el-tab-pane label="店铺资料" name="1"></el-tab-pane>
      <el-tab-pane label="店铺装修" name="0"></el-tab-pane>
      <el-tab-pane label="修改密码" name="2"></el-tab-pane>
    </el-tabs>
    <div class="box" v-if="activeName == '1'">
      <div class="mainbox">
        <div class="msgbox">
          <div class="msgtop">
            <div class="one">
              <img src="../../../assets/image/shopMange/home.png" alt="" />
              <span>店铺信息</span>
            </div>
            <div
              class="two"
              @click="
                $router.push({
                  path: 'editStore',
                  query: {
                    id: userData.id,
                  },
                })
              "
            >
              <i class="el-icon-edit-outline"></i>
              <span> 编辑信息</span>
            </div>
          </div>

          <div class="msgbottom">
            <div class="bheader">
              <img src="../../../assets/image/shopMange/avatar.png" alt="" />
              <span>{{ storeData.storeName }}</span>
            </div>

            <el-row style="width: 100%">
              <el-col :span="6">
                <div class="item">
                  <div class="left">登陆账号</div>
                  <div class="right">{{ storeData.memberName }}</div>
                </div>
              </el-col>

              <el-col :span="6">
                <div class="item">
                  <div class="left">联系人</div>
                  <div class="right">{{ storeData.memberNickName }}</div>
                </div>
              </el-col>

              <el-col :span="6">
                <div class="item">
                  <div class="left">联系电话</div>
                  <div class="right" v-if="storeData.storePhone">
                    {{ storeData.storePhone }}
                  </div>
                  <div class="right none" v-else>未填写</div>
                </div>
              </el-col>

              <el-col :span="6">
                <div class="item">
                  <div class="left">微信号</div>
                  <div class="right" v-if="storeData.storeVx">
                    {{ storeData.storeVx }}
                  </div>
                  <div class="right none" v-else>未填写</div>
                </div>
              </el-col>
            </el-row>

            <el-row style="width: 100%">
              <el-col :span="6">
                <div class="item">
                  <div class="left">微信二维码</div>
                  <div class="right" v-if="storeData.storeQrcode">
                    <span class="ck" @click="openImg(storeData.storeQrcode)"
                      >查看</span
                    >
                  </div>
                  <div class="right none" v-else>未填写</div>
                </div>
              </el-col>

              <el-col :span="6">
                <div class="item">
                  <div class="left">邮箱</div>
                  <div class="right" v-if="storeData.storeEmail">
                    {{ storeData.storeEmail }}
                  </div>
                  <div class="right none" v-else>未填写</div>
                </div>
              </el-col>

              <el-col :span="6">
                <div class="item">
                  <div class="left">所在市场</div>
                  <div class="right" v-if="storeData.storeMarket">
                    {{ storeData.storeMarket }}
                  </div>
                  <div class="right none" v-else>未填写</div>
                </div>
              </el-col>

              <el-col :span="6">
                <div class="item">
                  <div class="left">售后服务</div>
                  <div class="right" v-if="storeData.returnGoods">
                    支持15天退货
                  </div>
                  <div class="right" v-else>不支持15天退货</div>
                  ,
                  <div class="right" v-if="storeData.exchangeGoods">
                    支持15天换货
                  </div>
                  <div class="right" v-else>不支持15天换货</div>
                </div>
              </el-col>
            </el-row>

            <el-row style="width: 100%">
              <el-col :span="16">
                <div class="item">
                  <div class="left">店铺地址</div>
                  <div class="right" v-if="storeData.storeAddressDetail">
                    {{ storeData.storeAddressDetail }}
                  </div>
                  <div class="right none" v-else>未填写</div>
                </div>
              </el-col>
            </el-row>
            <el-row style="width: 100%">
              <el-col :span="6">
                <div class="item">
                  <div class="left">店铺域名</div>
                  <div class="right" v-if="storeData.storeDomainName">
                    http://{{ storeData.storeDomainName }}.wjtzw.cn
                  </div>
                  <div class="right none" v-else>未填写</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>

        <div class="shimingbox">
          <div class="msgtop">
            <div class="one">
              <img src="../../../assets/image/shopMange/card.png" alt="" />
              <span>实名认证</span>
            </div>
            <div class="two" v-if="userData.realName && userData.idNumber">
              <i class="el-icon-success" style="color: rgb(87, 190, 51)"></i>
              <span> 已完成实名认证</span>
            </div>
            <div
              v-else
              class="two"
              @click="
                $router.push({
                  path: '/authentication',
                  query: {
                    id: userData.id,
                  },
                })
              "
            >
              <i class="el-icon-edit-outline"></i>
              <span> 编辑信息</span>
            </div>
          </div>

          <div class="msgbottom">
            <el-row style="width: 100%">
              <el-col :span="6">
                <div class="item">
                  <div class="left">真实姓名</div>
                  <div class="right" v-if="nameShow">
                    {{ userData.realName | phoneFilter }}
                    <span style="color: #399ef1" @click="nameShow = !nameShow"
                      >显示</span
                    >
                  </div>
                  <div class="right" v-else>
                    {{ userData.realName }}
                    <span style="color: #399ef1" @click="nameShow = !nameShow"
                      >隐藏</span
                    >
                  </div>
                </div>
              </el-col>

              <el-col :span="6">
                <div class="item">
                  <div class="left">身份证号码</div>
                  <div class="right" v-if="idShow">
                    {{ userData.idNumber | idFilter }}
                    <span style="color: #399ef1" @click="idShow = !idShow">显示</span>
                  </div>
                  <div class="right" v-else>
                    {{ userData.idNumber }}
                    <span style="color: #399ef1" @click="idShow = !idShow">隐藏</span>
                  </div>
                </div>
              </el-col>

              <el-col :span="6">
                <div class="item">
                  <div class="left">身份证正面</div>
                  <div
                    class="right"
                    v-if="userData.idCardFront"
                    @click="openImg(userData.idCardFront)"
                  >
                    <span style="color: #399ef1">查看</span>
                  </div>
                </div>
              </el-col>

              <el-col :span="6">
                <div class="item">
                  <div class="left">身份证反面</div>
                  <div
                    class="right"
                    v-if="userData.idCardBack"
                    @click="openImg(userData.idCardBack)"
                  >
                    <span style="color: #399ef1">查看</span>
                  </div>
                </div>
              </el-col>
            </el-row>

            <el-row style="width: 100%">
              <el-col :span="6">
                <div class="item">
                  <div class="left">营业执照</div>
                  <div
                    class="right"
                    v-if="userData.businessLicense"
                    @click="openImg(userData.businessLicense)"
                  >
                    <span style="color: #399ef1">查看</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>

        <!-- <div class="chengxinbox">
          <div class="msgtop">
            <div class="one">
              <img src="../../../assets/image/shopMange/king.png" alt="" />
              <span>诚信商家</span>
            </div>
          </div>

          <div class="msgbottom">
            <div class="text1">未开通诚信商家</div>

            <div class="textbox">
              <span
                >开通诚信商家后可享受诚信商家专属权益，诚信保证金3000元，保证金随时可退。</span
              >
              <span style="color: #e22a1f">查看诚信商家权益>></span>
            </div>

            <div class="button">立即开通</div>
          </div>
        </div>

        <div class="fuwubox">
          <div class="msgtop">
            <div class="one">
              <img src="../../../assets/image/shopMange/paynum.png" alt="" />
              <span>服务费</span>
            </div>
          </div>

          <div class="msgbottom">
            <el-row style="width: 100%">
              <el-col :span="6">
                <div class="item">
                  <div class="left">开通状态</div>
                  <div class="right">
                    <span>未开通</span>
                    <div class="button">开通</div>
                  </div>
                </div>
              </el-col>

              <el-col :span="6">
                <div class="item">
                  <div class="left">开通时间</div>
                  <div class="right">2023 - 02 - 12 10:18</div>
                </div>
              </el-col>

              <el-col :span="6">
                <div class="item">
                  <div class="left">支付方式</div>
                  <div class="right">支付宝</div>
                </div>
              </el-col>

              <el-col :span="6">
                <div class="item">
                  <div class="left">QQ号</div>
                  <div class="right">487995662</div>
                </div>
              </el-col>
            </el-row>

            <el-row style="width: 100%">
              <el-col :span="6">
                <div class="item">
                  <div class="left">支付时间</div>
                  <div class="right">2023 - 02 - 12 10:18</div>
                </div>
              </el-col>

              <el-col :span="6">
                <div class="item">
                  <div class="left">到期时间</div>
                  <div class="right">2023 - 02 - 12 10:18</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div> -->
      </div>
    </div>
    <ShopDecoration v-if="activeName == '0'" :form="form"></ShopDecoration>
    <editPassWord v-if="activeName == '2'"></editPassWord>
  </div>
</template>

<script>
import { getUserData } from "@/api/user";
import { pmsStore, selectStoreDecorateByStoreId } from "@/api/shopMange";
import ShopDecoration from "./components/ShopDecoration.vue";
import editPassWord from "./components/editPassWord.vue";
export default {
  components: { ShopDecoration, editPassWord },
  created() {},
  data() {
    return {
      headerlist: ["店铺资料", "店铺装修", "修改密码"],
      activeindex: 0,
      activeName: "1",
      storeData: {},
      userData: {},
      form: {},
      nameShow: true,
      idShow: true,
    };
  },
  created() {
    this.getUserData();
  },
  filters: {
    // 姓名过滤器
    phoneFilter(val) {
      const reg = /^(.{1}).*(.{0})$/;
      return val.replace(reg, "$1*$2");
    },
    idFilter(val) {
      const reg = /^(.{3}).*(.{4})$/;
      return val.replace(reg, "$1***********$2");
    },
  },
  methods: {
    //查看图片
    openImg(url) {
      window.open(url);
    },
    //获取个人信息
    getUserData() {
      getUserData().then((data) => {
        this.userData = data.data;
        pmsStore({
          memberId: data.data.id,
        }).then((res) => {
          this.storeData = res.data;
          console.log(this.storeData);
          this.selectStoreDecorateByStoreId(res.data.id);
        });
      });
    },
    //获取店铺装修信息
    selectStoreDecorateByStoreId(id) {
      selectStoreDecorateByStoreId({
        storeId: this.storeData.id,
      }).then((data) => {
        this.form = data.data;
      });
    },
    tobind(type) {
      this.$router.push(`/bind?type=${type}`);
    },
  },
};
</script>

<style scoped lang="scss">
.main {
  width: calc(100%);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background: #ffffff;
  font-size: 12px;
  /deep/ .el-tabs__item.is-active {
    color: #e22a1f;
  }
  /deep/ .el-tabs__active-bar {
    background-color: #e22a1f;
  }
  /deep/ .el-tabs__item:hover {
    color: #e22a1f;
  }
  .shadow {
    flex-shrink: 0;
    width: 100%;
    height: 0.2rem;
    // background: #F5F5F5;
    background: linear-gradient(0deg, #ffffff, #f5f5f5);
  }
  .two {
    margin-left: 0.4rem;
    font-size: 0.14rem;
    color: #666666;
    cursor: pointer;
  }
  .box {
    padding: 0rem 0.2rem;
    width: calc(100% - 0.4rem);
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    .header {
      width: 100%;
      height: 0.33rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      border-bottom: 0.01rem solid #f3f3f3;
      .item:first-child {
        margin-left: 0rem;
      }
      .item {
        margin-left: 0.6rem;
        width: 0.7rem;
        height: 0.3rem;
        text-align: center;
        font-size: 0.16rem;
        color: #000000;
      }
      .activeitem {
        border-bottom: 0.03rem solid #e22a1f;
        color: #e22a1f;
      }
    }
    .mainbox {
      margin-top: 0.15rem;
      padding: 0.15rem 0.2rem;
      width: calc(100% - 0.4rem);
      height: 7.7rem;
      display: flex;
      flex-direction: column;
      // justify-content: space-between;
      align-items: center;
      border: 0.01rem solid #f3f3f3;
      .none {
        color: #999999 !important;
      }
      .msgbox {
        width: 100%;
        height: 2.26rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        .msgtop {
          width: 100%;
          height: 0.4rem;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          color: #000000;
          .one {
            width: 1.2rem;
            height: 0.4rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.2rem;
            font-weight: 600;
            img {
              width: 0.32rem;
              height: 0.32rem;
            }
          }
          .two {
            margin-left: 0.4rem;
            font-size: 0.14rem;
            color: #666666;
            cursor: pointer;
          }
        }
        .msgbottom {
          padding: 0.17rem 0.25rem;
          width: calc(100% - 0.5rem);
          height: 1.46rem;
          border-radius: 0.1rem;
          background: #f5f7f9;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          .bheader {
            width: 100%;
            height: 0.36rem;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 0.2rem;
            font-weight: bold;
            color: #000000;
            img {
              width: 0.36rem;
              height: 0.36rem;
              margin-right: 0.1rem;
            }
          }
          .item {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 0.14rem;
            color: #000000;
            .left {
              margin-right: 0.22rem;
            }
            .right {
              font-weight: bold;
              cursor: pointer;
              .ck {
                color: #399ef1;
                cursor: pointer;
              }
            }
          }
        }
      }
      .shimingbox {
        width: 100%;
        height: 1.4rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.2rem;
        .msgtop {
          width: 100%;
          height: 0.4rem;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          color: #000000;
          .one {
            width: 1.2rem;
            height: 0.4rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.2rem;
            font-weight: 600;
            img {
              width: 0.32rem;
              height: 0.32rem;
            }
          }
        }
        .msgbottom {
          padding: 0.17rem 0.25rem;
          width: calc(100% - 0.5rem);
          height: 1rem;
          border-radius: 0.1rem;
          background: #f5f7f9;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;
          .item {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 0.14rem;
            color: #000000;
            .left {
              margin-right: 0.22rem;
            }
            .right {
              font-weight: bold;
              cursor: pointer;
            }
          }
        }
      }
      .chengxinbox {
        width: 100%;
        height: 1.92rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        .msgtop {
          width: 100%;
          height: 0.4rem;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          color: #000000;
          .one {
            width: 1.2rem;
            height: 0.4rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.2rem;
            font-weight: 600;
            img {
              width: 0.32rem;
              height: 0.32rem;
            }
          }
        }
        .msgbottom {
          padding: 0.17rem 0.25rem;
          width: calc(100% - 0.5rem);
          height: 1rem;
          border-radius: 0.1rem;
          background: #f5f7f9;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: flex-start;
          color: #000000;
          .text1 {
            font-size: 0.2rem;
            font-weight: bold;
          }
          .textbox {
            width: 100%;
            text-align: left;
            display: flex;
            align-items: center;
            font-size: 0.14rem;
            span {
              margin-right: 0.12rem;
            }
          }
          .button {
            width: 0.76rem;
            height: 0.28rem;
            line-height: 0.28rem;
            text-align: center;
            border-radius: 0.2rem;
            background: #ffffff;
            border: 1px solid #e8e8e8;
            font-size: 0.12rem;
          }
        }
      }
      .fuwubox {
        width: 100%;
        height: 1.4rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        .msgtop {
          width: 100%;
          height: 0.4rem;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          color: #000000;
          .one {
            width: 1.2rem;
            height: 0.4rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.2rem;
            font-weight: 600;
            img {
              width: 0.32rem;
              height: 0.32rem;
            }
          }
        }
        .msgbottom {
          padding: 0.17rem 0.25rem;
          width: calc(100% - 0.5rem);
          height: 1rem;
          border-radius: 0.1rem;
          background: #f5f7f9;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;
          .item {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 0.14rem;
            color: #000000;
            .left {
              margin-right: 0.22rem;
            }
            .right {
              font-weight: bold;
              display: flex;
              .button {
                margin-left: 0.05rem;
                width: 0.48rem;
                height: 0.24rem;
                line-height: 0.24rem;
                text-align: center;
                border-radius: 0.2rem;
                background: #ffffff;
                border: 0.01rem solid #e8e8e8;
                font-size: 0.12rem;
              }
            }
          }
        }
      }
    }
  }
}
</style>
